<template>
	<div>
		<div class="yi">
		<van-icon name="arrow-left" @click="tap()"/>
		<span style="float: right;margin-top: 5%;margin-right: 5%;">使用说明</span>
		</div>
		
		<div class="er">
			<p style="color:#000;font-size: 18px;margin-left: 4%;">选择优惠券</p>
<!-- 优惠券单元格 -->
<van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />

<!-- 优惠券列表 -->
<van-popup v-model="showList" position="bottom">
	<van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
</van-popup>			
		</div>
		
		<div class="san"></div>
	</div>
</template>

<script>
	const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
};

	export default {
    name: "Yhfb",
    data() {
      return {
      	showList:false,
 chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon]
      }
    },
    methods:{
    	tap() {
       this.$router.go(-1)
      },
    	 onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    }
    }
  }
</script>

<style scoped>
	.yi{
		width:100%;
		height:50px;
	}
	.van-icon-arrow-left{
		margin-top: 5%;
		margin-left: 5%;
		float:left;
	}
</style>